/* eslint-disable no-const-assign */
import { useState, useEffect } from "react";
import TheRenderElement from "./elements/TheRenderElement";
import "../CSS/panel.css";
import { IconButton } from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import EditableLabel from './EditableLabel';
import ImageIconTag from './NodeIcon'

const TheNodePanelTemplate = ({
  NodeName,
  NodeType,
  onNodeNameChange,
  dynamicElements,
  onParamsChange,
  variables,
  OutputVariable,
  handleClose,
}) => {
  const [elements, setElements] = useState(
    dynamicElements.map((el, index) => ({
      ...el,
      id: index,
    }))
  );

  useEffect(() => {
    setElements(dynamicElements);
  }, [dynamicElements]);

  const [showVariableSelector, setShowVariableSelector] = useState([]);

  const handleChange = (index, value) => {
    let updatedElements = elements.map((el, idx) => {
      return idx === index ? { ...el, value: value } : el
    });
    onParamsChange(updatedElements);
  };

  const renderElements = () =>
    elements.map((element, index) => (
      <div key={index}>
        <div key={index} style={{ display: 'flex', flexDirection: 'column', alignItems: 'top', gap: "10px" }}>
          {
            <label className="mainLabel">
              {element.name.replace(/([A-Z])/g, ' $1').trim().replace(/^\w/, c => c.toUpperCase())}
            </label>
          }
          {TheRenderElement(
            index,
            element,
            handleChange,
            variables,
            showVariableSelector,
            setShowVariableSelector,
          )}
        </div>
        <div>
          {index === 0 ? (
            <div
              style={{
                width: "100%",
                borderBottom: "solid 1px",
                marginTop: "10px",
                marginBottom: "20px",
                borderColor: "#EDEDED",
              }}
            ></div>
          ) : (
            <></>
          )}
        </div>
      </div>
    ));

  return (
    <div className="RightPanel">
      <div className="header">
        <div className="headerIconBox">
          <ImageIconTag type={NodeType} size="l" />
          <><EditableLabel value={NodeName} onValueChange={onNodeNameChange} /></>
        </div>
        <div className="headerCloseButton">
          <IconButton aria-label="delete" size="small" onClick={handleClose}>
            <CloseIcon fontSize="small" />
          </IconButton>
        </div>
      </div>
      <div
        style={{
          position: "absolute",
          top: "80px",
          left: "20px",
        }}
      >
        {renderElements()}
        <div className="OtherWrapper">
          {OutputVariable && OutputVariable.length > 0 && (
            <>
              <label className="mainLabelOutput">Output Variables</label>
              {OutputVariable.map((el, index) => (
                <p key={index} className="outputVariables">{el}</p>
              ))}
            </>
          )}
          <label className="mainLabelOutput">Next Step</label>
          <p className="outputVariables">Add a next block in the workflow</p>
        </div>
      </div>

    </div>
  );
};

export default TheNodePanelTemplate;
